<template>
  <div class="s-menu-item" @click.stop="jumpToAndActive()">
    <span class="left-block">
      <span class="head-block"></span>
      <a class="common-link" :to="to">
        <slot></slot>
      </a>
    </span>
    <i class="icon-s" v-show="icon !== undefined" :class="['iconfont', icon] "></i>
  </div>
</template>

<script setup>
import {ref, reactive, defineProps, defineEmits} from 'vue';
import {useRouter} from "vue-router";
const props = defineProps({
  to: String,
  icon:String,
  index: Number
});

const emit = defineEmits(['idx']);

const router = new useRouter();
const jumpToAndActive = () => {
  router.push(props.to);
}

</script>
<style scoped>

.left-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.head-block {
  margin-right: .2em;
  display: block;
  width: .3em;
  height: 1em;
  background-color: #23c023;
  background-image: linear-gradient(to right bottom, #a0f2a0,#82e682, #6ae56a, #6ae56a, #56e656);
  border-radius: 3px;
}

.s-menu-item {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.s-menu-item:hover .common-link {
  color: #008900;
}
.common-link {
  display: inline-block;
  color: #999;
}

.icon-s {
  float: right;
}

.active {

}
</style>